<template>
  <div>
    <ZgDialog
      :title="title"
      width="30%"
      v-model="showAdd"
      @ok="onAddOk">
      <Add ref="add" :layer="layer" :pid="pid"></Add>
    </ZgDialog>
    <ZgDialog
      title="编辑信息"
      width="30%"
      v-model="showUpdate"
      @ok="onUpdateOk">
      <Update ref="update" :jsonStr="JSON.stringify(obj)"></Update>
    </ZgDialog>
    <a-card size="small">
      <template slot="title">
        菜单管理
      </template>
      <template slot="extra">
        <div class="flx-e">
          <div v-if="false">
            <a-input
              ref="searchInput"
              v-if="showSearch"
              v-model.trim="searchStr"
              class="w240 mr10"
              placeholder="请输入关键字"
              @blur="search"
              @keyup.enter.native="search"
            >
              <a-icon slot="prefix" type="search" />
            </a-input>
            <a-tooltip v-else title="搜索" placement="top">
              <div class="btn flx-c" @click="showSearchInput">
                <i class="fa fa-search"/>
              </div>
            </a-tooltip>
          </div>
          <a-tooltip title="刷新" placement="top">
            <div class="btn flx-c" @click="search">
              <i class="fa fa-refresh"/>
            </div>
          </a-tooltip>
          <a-button
            class="ml15"
            type="primary"
            @click="toAdd(1,null)">
            <i class="fa fa-plus mr5" />新增一级菜单
          </a-button>
        </div>
      </template>
      <a-table
        size="small"
        bordered
        rowKey="id"
        :indentSize="20"
        :customHeaderRow="customHeaderRow"
        :defaultExpandAllRows="true"
        :pagination="false"
        :data-source="list"
        :scroll="{ x: 0, y: winHeight-extraHeight }">
        <a-table-column title="名称" dataIndex="name"></a-table-column>
        <a-table-column :width="150" dataIndex="code" title="编码"></a-table-column>
        <a-table-column :width="60" title="图标">
          <template slot-scope="text,record">
            <a-icon :type="record.icon"/>
          </template>
        </a-table-column>
        <a-table-column :width="100" dataIndex="state" title="状态">
          <template slot-scope="text,record">
            <a-tag v-if="record.isUse" color="green">启用</a-tag>
            <a-tag v-else>禁用</a-tag>
          </template>
        </a-table-column>
        <a-table-column :width="60" title="操作">
          <template slot-scope="text,record">
            <a-dropdown>
              <a class="ant-dropdown-link" @click="e => e.preventDefault()">
                <i class="fa fa-ellipsis-h"/>
              </a>
              <a-menu slot="overlay">
                <a-menu-item @click="toDel(record.id)"><i class="fa fa-trash mr5"/>删除</a-menu-item>
                <a-menu-item @click="toUpdate(record)"><i class="fa fa-pencil mr5"/>修改</a-menu-item>
                <a-menu-item @click="toAdd(2,record.id)" v-if="record.layer===1"><i class="fa fa-plus-circle mr5"/>二级菜单</a-menu-item>
              </a-menu>
            </a-dropdown>
          </template>
        </a-table-column>
      </a-table>

    </a-card>
  </div>
</template>
<script>
import Add from './Add'
import Update from './Update'
export default {
  components: {
    Add, Update
  },
  data () {
    return {
      showSearch: false,
      extraHeight: 200,
      showAdd: false,
      showUpdate: false,
      title: '新增一级菜单',
      titleArr: ['新增一级菜单', '新增二级菜单'],
      layer: 1,
      pid: null,
      list: [],
      searchStr: '',
      obj: null
    }
  },
  mounted () {
    this.search()
  },
  methods: {
    customHeaderRow () {
      return {
        style: {
          background: '#f2f2f2'
        }
      }
    },
    showSearchInput () {
      this.showSearch = true
      setTimeout(() => {
        this.$refs.searchInput.focus()
      })
    },
    search () {
      this.$http.get('/zg-system/menu/list', {}, data => {
        this.list = data
      })
    },
    toAdd (layer, pid) {
      this.layer = layer
      this.pid = pid
      this.title = this.titleArr[layer - 1]
      this.showAdd = true
    },
    onAddOk () {
      const result = this.$refs.add.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-system/menu/add', result.data, () => {
        this.showAdd = false
        this.search()
      })
    },
    toDel (id) {
      this.confirm(
        () => {
          this.$http.post('/zg-system/menu/del', [id], () => {
            this.search()
          })
        },
        '确定要删除这条数据么'
      )
    },
    toUpdate (obj) {
      this.obj = obj
      this.showUpdate = true
    },
    onUpdateOk () {
      const result = this.$refs.update.save()
      if (!result.isOk) {
        this.$error({ title: result.msg })
        return
      }
      this.$http.post('/zg-system/menu/update', result.data, () => {
        this.showUpdate = false
        this.search()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .btn{
    width:32px;
    height:32px;
    color:#999;
    &:hover{
      cursor:pointer;
      color:#2979ff
    }
  }
</style>
